<template>
  <div class="box">
    <div class="box-bgc"></div>
    <div class="box-con">
      <el-button size="medium" class="backBtn" @click="close">
        关闭
      </el-button>
      <div class="title">{{baseInfo.title}}({{baseInfo.total_score}}分)</div>
      <!-- 头部 -->
      <div class="base-infor">
        <div class="base-infor-item">
          <label>员工名称： </label>
          <span>{{baseInfo.person_name}}</span>
        </div>
        <div class="base-infor-item">
          <label>职位： </label>
          <span>{{baseInfo.roles}}</span>
        </div>
        <div class="base-infor-item" v-if="from=='ExamCheck'">
          <label>得分： </label>
          <span>{{baseInfo.Score}} 分</span>
        </div>
        <div class="base-infor-item" v-if="from=='ExamCheck'">
          <label>评级： </label>
          <span>{{baseInfo.rate}}</span>
        </div>
        <div class="base-infor-item">
          <label>评分人： </label>
          <span>{{baseInfo.score_name}}</span>
        </div>
      </div>
      <!-- 主体 -->
      <div style="font-size: 18px">评分人员</div>
      <!-- 打分时 -->
      <div v-if="from=='ExamTask'">
        <div v-for="(data, index) in dataList" :key="data.title">
          <div style="font-size: 18px;margin-top: 20px">
            {{titleNum(index+1)}}、{{data.title}}({{data.score}})
          </div>
          <div class="card" v-for="(item,index2) in data.items" :key="item.id">
            <div class="item-title">
              {{index2+1}}、{{item.title}}({{item.score}}分) 
              <span style="color: #999">{{item.type}}</span>
            </div>
            <div class="item-field">
              <label>评分说明：</label>
                <span v-if="item.description==''">-</span>
                <span v-else>{{item.description}}</span>
              <el-divider></el-divider>
            </div>
            <div class="item-field">
              <div style="margin-bottom: 30px">
                <label>得分：</label>
                <span>
                  <el-input v-model.number="item.getScore"  style="width: 200px" @input="inputChange(item.score, item.getScore, index, index2)"></el-input>
                </span>
              </div>
              <div>
                <label>评语：</label>
                <span>
                  <el-input v-model="item.result" style="width: 600px"></el-input>
                </span>
              </div>
              <el-divider></el-divider>
            </div>
          </div>
        </div>
      </div>
      <!-- 查看时 -->
      <div v-else>
        <div v-for="(data, index) in dataList[0]" :key="data.title">
          <div style="font-size: 18px;margin-top: 20px">
            {{titleNum(index+1)}}、{{data.title}}({{data.score}})
          </div>
          <div class="card" v-for="(item,index2) in data.items" :key="item.id">
            <div class="item-title">
              {{index2+1}}、{{item.title}}({{item.score}}分) 
              <span style="color: #999">{{item.type}}</span>
            </div>
            <div class="item-field">
              
              <label>评分说明：</label>
                <span v-if="item.description==''">-</span>
                <span v-else>{{item.description}}</span>
            </div>
            <el-divider></el-divider>
            <div class="item-field item-field-check">
               <el-table 
                :data="options[index][index2]"
                style="width: 361px" 
                border 
                >
                <el-table-column prop="name" label="评分人" width="180" />
                <el-table-column prop="getScore" label="得分" width="180" />
              </el-table>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
      <el-button 
        class="backBtn bottomBtn" 
        @click="submitHandle"
        v-if="from=='ExamTask'">
        提交
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      from: '', // true代表来自ExamTask需要开启输入功能，false代表来自ExamCheck只是查看
      dataList: [],  // 打分时的
      options: [], // 每题对应的打分人的分数
      baseInfo: {},
      dataListBack: []  // 查看时的
    }
  },
  created() {
    // console.log(this.$route);
    this.from = this.$route.query.from
    // console.log(this.from);
    if (this.from == 'ExamTask') {
      this.getExamTask()
    } else {
      this.getExamTaskInfo()
    }
  },
  methods: {
    // 打分时
    getExamTask() {
      this.$http('mark/task', 'post', {markId: this.$route.query.id}, true, resp => {
        if (resp.code == 200) {
          console.log(resp);
          let {data} = resp
          this.baseInfo = data
          this.dataList = JSON.parse(data.options)
          console.log(this.dataList);
        }
      })
    },
    // 查询时考核详情
    getExamTaskInfo() {
      this.$http('examinee/selectExaminee', 'post', {examId: this.$route.query.id, personId: this.$route.query.person_id}, true, resp => {
        if (resp.code == 200) {
          console.log(resp);
          let {data} = resp
          this.baseInfo = data
          // this.dataList = JSON.parse(data.options)
          Object.keys(data.options).forEach((key,index) => {
            this.dataList[index] = JSON.parse('[' + data.options[key] + ']')
          })
          console.log(this.dataList);
        }
        // 处理options的结构
        let name = this.baseInfo.name
        this.options = []
        // 预先添加好的this.options个数(结构)
        this.dataList.forEach((options, index) => {
          this.options.push([])
          Object.keys(options).forEach((key,index2) => {
            this.options[index].push([])
            let items = options[key].items
            items.forEach(() => {
              this.options[index][index2].push([])
            })
          })
        })
        
        this.dataList.forEach((options, index) => {
          Object.keys(options).forEach((key,index2) => {
            // console.log(options[key]);
            let items = options[key].items
            items.forEach((item,index3) => {
              // console.log(item);
              this.options[index2][index3][index] = item
              this.options[index2][index3][index].name = name[index]
            })
          })
        })
        console.log(this.options);
      })
    },
    submitHandle() {
      // console.log(this.dataList);
      let finalScore = 0
      this.dataList.forEach(data => {
        data.items.forEach(item => {
          finalScore += item.getScore
        })
      })
      // console.log(finalScore);
        if (finalScore) {
        const form = {
          score: finalScore,
          options: this.dataList,
          markId: this.baseInfo.exam_mark_id
        }
        console.log(form);
        
        this.$http('mark/returnScore', 'post', form, true, resp => {
          if (resp.code == 200) {
            this.$message({
              message: '打分成功',
              type: 'success',
              duration: 1200
            })
            setTimeout(() => {
              this.close()
            }, 1200)
          }
        })
      } else {
        this.$message({
          message: '还有未打分的题目',
          type: 'error',
          duration: 1200
        })
      }
    },
    inputChange(maxScore, score, index, index2) {
      // console.log(maxScore);
      // console.log(score);
      if (score > maxScore) {
        this.dataList[index].items[index2].getScore = maxScore
        this.$message({
          message: '得分不能超过本题最大分数',
          type: 'error',
          duration: 1200
        })
      }
      if (score < 0) {
        this.dataList[index].items[index2].getScore = 0
        this.$message({
          message: '得分不能为负数',
          type: 'error',
          duration: 1200
        })
      }
    },
    close() {
      console.log(this.from);
      if (this.from == 'ExamTask') {
        this.$router.push({name: this.from})
      } else {
        this.$router.push({name: this.from, params: {id: this.$route.query.back_id}})
      }
      // 关闭当前窗口
      // window.close()
    }
  },
  computed: {
    titleNum() {
      return (index) => {
        const nums = ['零','一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
        let str = ''
        // console.log(index % 10);
        while(index % 10 > 0) {
          // console.log(index);
          str += nums[index % 10]
          index = Math.floor(index / 10)
        }
        return str
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './examCheckInfo.scss';
</style>
